
<html>

<wicket:extend>
<div class="container">
  <h2 style="text-align: center;" wicket:id="top_header"></h2>
  <div class="span-24 last" style="text-align: center;">
  <!-- image links start -->
    <a href="#" wicket:id="room01Link"><img class="tight" wicket:id="room"/></a>
    <a href="#" wicket:id="room02Link"><img class="tight" wicket:id="natural_space"/></a>
    <a href="#" wicket:id="room03Link"><img class="tight" wicket:id="bathroom"/></a>
    <a href="#" wicket:id="room04Link"><img class="tight" wicket:id="kitchen"/></a>
    <a href="#" wicket:id="room05Link"><img class="tight" wicket:id="living"/></a>
    <a href="#" wicket:id="room06Link"><img class="tight" wicket:id="entrance"/></a>
  <!-- image links end -->
  </div>

  <div class="span-24 last prepend-top">
    <div class="span-4">
    <!-- 1st column -->
      <h3 class="tight">Current Mode:</h3>
      <div class="append-bottom">
      <fieldset>
      <h4 class="tight" wicket:id="cur_mode" align="center"></h4>
      </fieldset>
      </div>
      <h3 class="tight">Preset Mode:</h3>
      <fieldset>
      <table style="border: 1px;" cellpadding="0" cellspacing="0" class="sortable" width="100%">
        <tbody>
          <tr><td><input type="checkbox" />Manual</td></tr>
          <tr><td><input type="checkbox" />Paranoid</td></tr>
          <tr><td><input type="checkbox" />Defcon 1</td></tr>
          <tr><td><input type="checkbox" />Defcon 2</td></tr>
          <tr><td><input type="checkbox" />Defcon 3</td></tr>
          <tr><td><input type="checkbox" />Defcon 4</td></tr>
          <tr><td><input type="checkbox" />Defcon 5</td></tr>
        </tbody>
      </table>
      </fieldset>
      <input wicket:id="mode_load" type="button" value="Load"/>
      <input wicket:id="mode_del" type="button" value="Delete"/>
      
      <h3 class="prepend-top tight">Mode Name:</h3>
      <input type="text" name="mode_name"/>
      <h4>Manual - Allows the user to manuall configure security</h4>
      <input wicket:id="mode_save" type="button" value="Save"/>
    </div>
  
    <div class="span-8">
    <!-- 2nd column-->
    <input class="span-8" type="button" wicket:id="security_on" value="Security ON" style="font-size: 24"/>
    <h3 class="span-8 tight prepend-top">Current Room:</h3>
    <div class="span-7 append-bottom" >
    <fieldset>
    <h4 class="tight" wicket:id="cur_room" align="center"></h4>
    </fieldset>
    </div>
    <h3 class="span-8 tight">Choose Room:</h3>
    <div class="span-7" >
    <fieldset>
    <table style="border: 1px;" cellpadding="0" cellspacing="0" class="sortable" width="100%">
      <tbody>
        <tr><td><input type="checkbox" />Room</td></tr>
        <tr><td><input type="checkbox" />Natural Space</td></tr>
        <tr><td><input type="checkbox" />Bathroom</td></tr>
        <tr><td><input type="checkbox" />Kitchen</td></tr>
        <tr><td><input type="checkbox" />Living Room</td></tr>
        <tr><td><input type="checkbox" />Dining Room</td></tr>
        <tr><td><input type="checkbox" />Sleeping Room</td></tr>
        <tr><td><input type="checkbox" />Entrance</td></tr>
      </tbody>
    </table>
    </fieldset>
    </div>
      <input wicket:id="room_choice" type="button" value="Choose"/>
      
    </div>
  
    <div class="span-8">
      <!-- 3rd column -->
      <input class="span-8 last" type="button" wicket:id="security_off" value="Security OFF" style="font-size: 24"/>
      <h3 class="span-8 tight prepend-top">Alert Users:</h3>
      <div class="span-7" style="width: 240px; ">
      <fieldset>
        <table style="border: 1px;" cellpadding="0" cellspacing="0" class="sortable" width="100%">
          <tbody>
            <tr><td><input type="checkbox" />John Lennon</td></tr>
            <tr><td><input type="checkbox" />Dog</td></tr>
            <tr><td><input type="checkbox" />Cat</td></tr>
            <tr><td><input type="checkbox" />Billy Bob</td></tr>
            <tr><td><input type="checkbox" />Mom</td></tr>
            <tr><td><input type="checkbox" />Dad</td></tr>
            <tr><td><input type="checkbox" />Bob Dylan</td></tr>
          </tbody>
        </table>
      </fieldset>
      </div>
    </div>

    <div class="span-4 last">
    <!-- 4th column -->
      <h3 class="tight">Alarm PIN</h3>
      <input type="text"/>
      <h4>Code to arm/disarm system.</h4>
      <h3 class="tight">Panic PIN</h3>
      <input type="text"/>
      <h4>Code to call for police assistance.</h4>
      <div style="text-align: right;"><input wicket:id="submit" type="button" value="Submit"/></div>
    </div>

  </div>
</div>
</wicket:extend>
</html>

